<template>
    <div>
        <el-card class="card">
            <div class="title">
                <h2 style="text-align: center">用户管理</h2>
            </div>
        </el-card>
        <br />
        <el-card v-loading="loading">
            <el-row>
                <el-col :span="4">
                    <el-input v-model="name"><template slot="prepend">姓名：</template></el-input>
                </el-col>
                <el-col :span="1" style="margin-left: 5px">
                    <el-button type="primary" @click="search">查询</el-button>
                </el-col>
                <el-col :span="1" :offset="1">
                    <el-button type="info" style="margin-bottom: 5px" @click="addDialog">新增用户</el-button>
                </el-col>
            </el-row>
            <div>
                <el-table :data="tableData" border style="width: 100%" v-loading="loading">
                    <el-table-column prop="username" label="工号" header-align="center" align="center"> </el-table-column>
                    <el-table-column prop="name" label="姓名" header-align="center" align="center"> </el-table-column>
                    <el-table-column prop="deptId" label="所属部门" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="mail" label="邮箱" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="deptJob" label="部门职务" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="govJob" label="党政职务" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="isWork" label="状态" header-align="center" align="center">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.isWork === 0" size="small" type="danger">离职</el-tag>
                            <el-tag v-else size="small">在职</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" header-align="center" align="center" width="200">
                        <template slot-scope="scope">
                            <el-button type="primary" @click="editUserById(scope.row.id)">编辑</el-button>
                            <el-button type="danger" @click="deleteUserById(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <br />
                <!--分页部分-->
                <el-pagination
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageInfo.pageNum"
                    :page-sizes="[10, 15, 20, 25]"
                    :page-size="10"
                    layout="sizes, prev, pager, next"
                >
                </el-pagination>
            </div>
        </el-card>
        <!--新增用户对话框-->
        <el-dialog title="新增用户" :visible.sync="addDialogVisible" width="30%">
            <el-form :model="addUserForm" label-width="80px">
                <el-form-item label="工号" style="width: 60%">
                    <el-input v-model="addUserForm.username" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="姓名" style="width: 60%">
                    <el-input v-model="addUserForm.name" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="所属部门" style="width: 60%">
                    <el-select v-model="addUserForm.deptId" filterable>
                        <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱" style="width: 60%">
                    <el-input v-model="addUserForm.mail"></el-input>
                </el-form-item>
                <el-form-item label="部门职务" style="width: 60%">
                    <el-input v-model="addUserForm.deptJob"></el-input>
                </el-form-item>
                <el-form-item label="党政职务" style="width: 60%">
                    <el-input v-model="addUserForm.govJob"></el-input>
                </el-form-item>
                <el-form-item label="角色" style="width: 60%">
                    <el-select v-model="addUserForm.roleIdList" filterable>
                        <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" size="mini" prop="isWork">
                    <el-radio-group v-model="addUserForm.isWork">
                        <el-radio :label="0">离职</el-radio>
                        <el-radio :label="1">在职</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="pushAddUser">保存</el-button>
                <el-button type="info" @click="addDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>
        <!--编辑用户对话框-->
        <el-dialog title="编辑用户" :visible.sync="editDialogVisible" width="30%">
            <el-form :model="editUserForm" label-width="80px">
                <el-form-item label="工号" style="width: 60%">
                    <el-input v-model="editUserForm.username" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="姓名" style="width: 60%">
                    <el-input v-model="editUserForm.name" placeholder="必填"></el-input>
                </el-form-item>
                <el-form-item label="所属部门" style="width: 60%">
                    <el-select v-model="editUserForm.deptId" filterable>
                        <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱" style="width: 60%">
                    <el-input v-model="editUserForm.mail"></el-input>
                </el-form-item>
                <el-form-item label="部门职务" style="width: 60%">
                    <el-input v-model="editUserForm.deptJob"></el-input>
                </el-form-item>
                <el-form-item label="党政职务" style="width: 60%">
                    <el-input v-model="editUserForm.govJob"></el-input>
                </el-form-item>
                <el-form-item label="角色" style="width: 60%">
                    <el-select v-model="editUserForm.label" filterable>
                        <el-option v-for="item in roleOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" size="mini" prop="isWork">
                    <el-radio-group v-model="editUserForm.isWork">
                        <el-radio :label="0">离职</el-radio>
                        <el-radio :label="1">在职</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="pushEditUser" type="success">保存</el-button>
                <el-button @click="cancelEditUser">取 消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import userApi from '../../../api/user';
import departmentApi from '../../../api/department';
export default {
    data() {
        return {
            loading: false,
            tableData: [],
            addDialogVisible: false,
            addUserForm: {
                username: '',
                name: '',
                deptId: 1,
                mail: '',
                deptJob: '',
                govJob: '',
                roleIdList: [],
                isWork: 1
            },
            roleList: [],
            departmentOptions: [],
            roleOptions: [],
            pageInfo: {
                pageNum: 1,
                pageSize: 10,
                total: 0
            },
            editDialogVisible: false,
            editUserForm: {
                username: '',
                name: '',
                deptId: 1,
                mail: '',
                deptJob: '',
                govJob: '',
                roleIdList: [],
                isWork: 1
            },
            name: ''
        };
    },
    methods: {
        handleSizeChange(val) {
            this.pageInfo.pageSize = val;
            this.getUserData();
        },
        // 分页函数
        handleCurrentChange(current) {
            this.pageInfo.pageNum = current;
            this.getUserData();
        },
        async getDepartment() {
            await departmentApi.getAllDepart().then((res) => {
                for (let i = 0; i < res.data.length; ++i) {
                    this.departmentOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].name
                    };
                }
                // 强制刷新 解决有数据不渲染的问题
                this.$forceUpdate();
            });
        },
        async getRoles() {
            await userApi.getRoles().then((res) => {
                console.log(res.data);
                for (let i = 0; i < res.data.length; ++i) {
                    this.roleOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].roleName
                    };
                }
                // 强制刷新 解决有数据不渲染的问题
                this.$forceUpdate();
            });
        },
        // 查询
        async search() {
            await userApi.getByName(this.name).then((res) => {
                // console.log(this.name);
                this.tableData = res.data;
                for (let i = 0; i < this.tableData.length; ++i) {
                    for (let z = 0; z < this.$store.state.department.department.length; ++z) {
                        if (this.$store.state.department.department[z].id == this.tableData[i].deptId) {
                            this.tableData[i].deptId = this.$store.state.department.department[z].name;
                        }
                    }
                }
            });
        },
        addDialog() {
            this.addUserForm = {};
            this.addDialogVisible = true;
        },
        async getUserData() {
            /*await userApi.getAll().then((res) => {
                this.pageInfo.total = res.data.length;
            });*/

            await userApi.getUserByPage(this.pageInfo.pageNum, this.pageInfo.pageSize).then((res) => {
                this.loading = true;
                console.log(res.data);
                this.tableData = res.data;
                // 将id转换为name
                // this.tableData.deptId = departmentApi.getDepartmentById(this.tableData.deptId).name;
                for (let i = 0; i < this.tableData.length; ++i) {
                    for (let z = 0; z < this.$store.state.department.department.length; ++z) {
                        if (this.$store.state.department.department[z].id == this.tableData[i].deptId) {
                            this.tableData[i].deptId = this.$store.state.department.department[z].name;
                        }
                    }
                }
                this.loading = false;
            });
        },

        // 新增
        async pushAddUser() {
            let temp = [];
            temp.push(this.addUserForm.roleIdList);
            this.addUserForm.roleIdList = temp;
            console.log(this.addUserForm);
            await userApi.addUser(this.addUserForm).then((res) => {
                console.log(res);
                this.$message({
                    message: '添加用户成功！',
                    type: 'success'
                });
                this.getUserData();
                this.$forceUpdate();
                this.addDialogVisible = false;
            });
        },
        async editUserById(id) {
            this.editDialogVisible = true;
            await userApi.getUserById(id).then((res) => {
                let temp = res.data;

                temp.label = temp.roleIdList[0];
                console.log(temp);
                this.editUserForm = temp;
            });
        },
        // 取消编辑
        cancelEditUser() {
            this.editDialogVisible = false;
            this.editUserForm = {};
        },
        // 提交编辑
        async pushEditUser() {
            this.editUserForm.roleIdList[0] = this.editUserForm.label;
            delete this.editUserForm.label;
            console.log(this.editUserForm);
            await userApi.editUser(this.editUserForm.id, this.editUserForm).then((res) => {
                console.log(res);
                this.$message({
                    message: '修改成功！',
                    type: 'success'
                });
                this.getUserData();
                this.$forceUpdate();
                this.editDialogVisible = false;
            });
        },
        async deleteUserById(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch((err) => err);
            if (confirmResult != 'confirm') {
                return;
            }
            if (confirmResult == 'confirm') {
                //console.log(id);
                await userApi.deleteUser(id).then((res) => {
                    if (res.success == true) {
                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        });
                    } else {
                        this.$notify.error({
                            title: '操作错误',
                            message: res.message,
                            duration: 0
                        });
                    }
                });
                this.getUserData();
            }
        }
    },
    created() {
        // this.$store.dispatch('getDepartment');
        this.getUserData();
        this.getDepartment();
        this.getRoles();
    }
};
</script>

<style scoped>
.title {
    border: 1px #bcbcbc;
    width: 50%;
    margin: 0 auto;
}
.card {
    border-radius: 15px;
    width: 50%;
    margin: 0 auto;
}
</style>
